<template>
  <div class="menu-tree">
    <!-- <a-tree v-else defaultExpandAll @select="onSelect" :style="{flex:'0 20%'}" :showLine="true">
      <a-tree-node v-for="(parent) in menus" :title="parent.nameZh" :key="parent.id">
        <a-icon slot="switcherIcon" type="form" />
        <template v-if="parent.childrens">
          <a-tree-node
            v-for="(parent) in parent.childrens"
            :title="parent.nameZh"
            :key="parent.id"
            isLeaf
          >
            <a-icon slot="switcherIcon" type="form" />
          </a-tree-node>
        </template>
      </a-tree-node>
    </a-tree> -->
    <menuTree :style="{flex:'0 20%'}" ref="menuTree" @selectTreeNode="onSelect" :expandAll="true"/>
    <div class="menu-divider">
      <a-divider type="vertical" :style="{height:'100%'}" />
    </div>
    <a-table
      :pagination="false"
      :columns="columns"
      :dataSource="data"
      bordered
      :style="{flex:'0 80%'}"
    >
      <template slot="title">
        <a-button type="primary" @click="addMenu('add')">新增菜单</a-button>
      </template>
      <template slot="icon" slot-scope="text">
      <i :class="text"></i><span :style="{marginLeft:'10px'}">{{text}}</span>
    </template>
      <template slot="operation" slot-scope="text, record">
        <a-tooltip placement="top">
          <template slot="title">
            <span>编辑</span>
          </template>
          <a-icon type="form" @click="addMenu(record)" />
        </a-tooltip>
      </template>
    </a-table>
    <menuEdit ref="menuEdit" />
  </div>
</template>

<script>
const columns = [
  {
    title: "菜单名称",
    dataIndex: "nameZh"
  },
  {
    title: "地址",
    dataIndex: "url"
  },
  {
    title: "文件路径",
    dataIndex: "filePath"
  },
  {
    title: "排序标识",
    dataIndex: "sortCode"
  },
  {
    title: "图标",
    dataIndex: "icon",
    scopedSlots: { customRender: 'icon' }
  },
  {
    title: "是否禁用",
    dataIndex: "isDisable",
    customRender: (val, record, index) => {
      if (val) {
        return "是";
      }
      return "否";
    }
  },
  {
    title: "操作",
    dataIndex: "operation",
    scopedSlots: { customRender: 'operation' }
  }
];
import menuTree from '@/syscomponents/menuTree.vue'
import { menu, getChildAndSelfById } from "./api";
import menuEdit from "./edit";
export default {
  data() {
    return {
      data: [],
      columns,
      menus: []
    };
  },
  components: { menuEdit,menuTree },
  mounted() {
    this.$refs.menuTree.menuTree()
  },
  methods: {
    menuTree() {
      menu().then(v => {
        if (v.ok) {
          this.menus = v.data;
        } else {
          this.$message.error(v.msg || "获取菜单树失败");
        }
      });
    },
    onSelect(keys, event) {
      getChildAndSelfById(keys).then(v => {
        if (v.ok) {
          this.ok = false;
          this.data = v.data;
        } else {
          this.$message.error(v.msg || "获取菜单信息失败");
        }
      });
    },
    addMenu(record) {
      this.$refs["menuEdit"].showModal(record,record==='add');
    }
  }
};
</script>

<style lang="scss" scoped>
.menu-tree {
  display: flex;
  height: 100%;
  .menu-divider {
    padding: 0 24px;
  }
}
</style>